<template>
  <el-dialog
    title="策略详情"
    :visible="checkDetailsDialog"
    width="630px"
    class="policy-check-detail-dialog"
    @close="handleClose"
  >
    <el-form
      ref="dialogForm"
      label-position="right"
      label-width="120px"
      :inline="true"
    >
      <el-form-item label="策略名称：" class="form-item1">
        {{ policyCheckDetail.policyName }}
      </el-form-item>
      <el-form-item label="策略方案：" class="form-item2">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="header"
          empty-text="暂无数据"
        >
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="nodeName" label="点位名称" />
          <el-table-column prop="innerCode" label="设备编号" />
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end" align="middle" style="height:60px">
          <el-pagination
            background
            :hide-on-single-page="value"
            :current-page.sync="policyDetail.pageIndex"
            :page-size.sync="policyDetail.pageSize"
            :page-sizes="[2,5,10,20,100]"
            layout="total, sizes,pager, prev, next"
            :total="total"
            prev-text="上一页"
            next-text="下一页"
            @size-change="getPolicyId"
            @current-change="getPolicyId"
          />
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getPolicyIdAPI } from '@/api/strategy'
export default {
  name: '',
  components: {},
  props: {
    checkDetailsDialog: {
      type: Boolean,
      default: false
    },
    policyCheckDetail: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tableData: [],
      policyDetail: {
        policyId: null,
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      value: true
    }
  },
  computed: {
  },
  watch: {},
  created() {
    this.getPolicyId()
  },
  methods: {
    // 退出
    handleClose() {
      this.$emit('update:checkDetailsDialog', false)
    },
    // 表头样式
    header() {
      return '{line-height: 1.15;padding: 10px 0px 9px;background: rgb(243, 246, 251);font-weight: 500;text-align: left;color: rgb(102, 102, 102);}'
    },
    // 查看详情
    async getPolicyId() {
      this.policyDetail.policyId = this.policyCheckDetail.policyId
      try {
        const { data } = await getPolicyIdAPI(this.policyDetail)
        this.tableData = data.currentPageRecords
        this.total = +data.totalCount
        if (data.totalCount > 0 && data.currentPageRecords.length === 0) {
          this.policySearch.pageIndex--
          this.getPolicySearch()
        }
      } catch (error) {
        this.$message.error('获取详情失败,请重试！')
        console.log(error)
      }
    }
  }
}
</script>
<style lang="scss">
.form-item1 {
  .el-form-item__content {
    width: 70%;
  }
  .el-input-group__append{
    padding: unset;
  }
}
.form-item2{
    .el-form-item__content {
    width: 70%;
    line-height: unset;
  }
  .el-input-group__append{
    padding: unset;
  }
}
.policy-check-detail-dialog {
  .el-dialog {
    border-radius: 10px;
  }
  .el-dialog__body {
    padding: 10px 40px;
  }
}
</style>
<style scoped lang='scss'>
.form-item1,
.form-item2 {
  width: 100%;
}
</style>
